<template>
    <view class="ver-layout">
        <!--  带搜索的标题栏  -->
        <view class="back-layout hor-layout">
            <view class="back-view" @click="navBack">
                <i class="iconfont back-icon">&#xe8de;</i>
            </view>
            <u-search margin="8px" placeholder="请输入教师姓名" v-model="teacherName" :action-style="searchStyle"></u-search>
        </view>
        <!-- 教师列表   -->
        <view class="teacher-list-layout">
            <view v-if="filterTeachers.length<=0" class="list-no-data">暂无数据</view>
            <block v-else>
                <view v-for="(item,index) in filterTeachers" :key="item.id">
                    <view class="teacher-item hor-layout-center">
                        <view class="check-box" @click="checkTeacher(item)">
                            <view class="check-view ver-layout-center-all" :class="{'select':item.id===selectTeaId}">
                                <i class="iconfont check-icon">&#xe72e;</i>
                            </view>
                        </view>
                        <image class="teacher-icon" :src="item.avatar?item.avatar:ic_teacher_man_default"/>
                        <view class="ver-layout teacher-info">
                            <view class="info-text">{{ item.name }}</view>
                            <view class="info-text" style="margin-top: 6px">钢琴教师</view>
                        </view>
                        <i class="iconfont schedule-view" @click="toSchedulePage(item)">&#xe60a;</i>
                    </view>
                </view>
            </block>
        </view>
        <!-- 确认   -->
        <view class="confirm-layout hor-layout-center-all">
            <view class="confirm-view" :class="{'disabled':!canSaveUse}" @click="confirmSelect">确认</view>
        </view>
    </view>
</template>

<script>
import {createClass, teacherSchedule} from "@/router.js"
import {SelectTeacherApi} from "@/api/enterStudent.js"

let ic_teacher_man_default = require("@/static/home/ic_teacher_man_default.png")
let engine = new SelectTeacherApi()
export default {
  name: "selectTeacher",
  data() {
    return {
      ic_teacher_man_default,
      from: '',
      searchStyle: {
        color: 'white',
        width: '60px',
        height: '28px',
        lineHeight: '28px',
        borderRadius: '14px',
        background: '#ff9900',
      },
      teacherList: [{}, {}],
      teacherName: '',
      selectTeaId: ''
    }
  },
  computed: {
    filterTeachers() {
      let tName = this.teacherName
      if (tName) return this.teacherList.filter(tea => tea.name.indexOf(tName) !== -1)
      return this.teacherList
    },
    canSaveUse() {
      return this.selectTeaId
    }
  },
  onLoad(options) {
    this.from = options.from
    this.getTeacherList()
  },
  methods: {
    navBack() {
      this.$u.route({type: 'back'})
    },
    checkTeacher(item) {
      this.selectTeaId = item.id
    },
    confirmSelect() {
      let selTea = this.teacherList.find(tea => tea.id === this.selectTeaId)
      let pages = getCurrentPages();
      console.log("confirmSelect", this.from, pages)
      let createClassPage = pages.find(page => page.route === this.from)
      createClassPage.$vm.confirmSelectTeacher(selTea);//重点$vm
      // this.$u.route({type: 'back'})
      uni.navigateBack({})
    },
    toSchedulePage(item) {
      this.$u.route({url: teacherSchedule, params: item})
    },
    getTeacherList() {
      engine.getTeacherList().then(res => {
        this.teacherList = res.data
      }).catch(err => {
        this.$u.toast(err.message);
      })
    }
  }
}
</script>

<style>
    page {
        background: #F2F2F2;
    }

    .back-layout {
        position: fixed;
        width: 100%;
        padding-top: var(--status-bar-height);
        height: calc(var(--status-bar-height) + 44px);
        line-height: 44px;
        font-size: 16px;
        background: #42B4AC;
    }

    .back-view {
        padding-left: 9px;
        padding-right: 9px;
    }

    .back-icon {
        color: white;
        font-size: 22px;
    }

    .teacher-list-layout {
        padding-top: calc(18px + 44px + var(--status-bar-height));
        padding-bottom: 60px;
    }

    .teacher-item {
        padding: 12px;
        padding-left: 0px;
        margin: 0px 12px;
        margin-bottom: 18px;
        background: #FFFFFF;
        border-radius: 6px;;
    }

    .teacher-icon {
        width: 38px;
        height: 38px;
        border-radius: 3px;
        background: #6D7A88;
    }

    .teacher-info {
        flex: 1;
        margin-left: 6px;
    }

    .info-text {
        line-height: 14px;
        font-size: 14px;
        color: #333333;
    }

    .schedule-view {
        color: #FCC62D;
        font-size: 23px;
    }

    .check-box {
        padding: 12px;
    }

    .check-view {
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        background: white;
        border: 1px solid gray;
    }

    .check-view.select {
        background: #42B4AB;
        border: 1px solid #42B4AB;
    }

    .check-icon {
        color: white;
        font-size: 10px;
    }

    .confirm-layout {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0px;
        background: #F2F2F2;
        border-top: 1px solid white;
    }

    .confirm-view {
        margin: auto;
        width: 70%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: #42B4AB;
        border-radius: 17px;
        font-size: 16px;
        color: white;
    }

    .confirm-view.disabled {
        background: #c9c9c9;
    }
</style>
